<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			ul {
				list-style: none;
			}
			
			#banner {
				width: 712px;
				height: 108px;
				margin: 200px auto;
				position: relative;
				overflow: hidden;
			}
			
			#banner ul li {
				float: left;
				width: 178px;
				height: 108px;
			}
			
			#banner ul {
				position: absolute;
				top: 0;
				left: 0;
			}
			
			#content {
				width: 880px;
				height: 108px;
				margin: auto;
				margin-top: 50px;
				position: relative;
			}
			
			.a1 {
				display: block;
				width: 68px;
				height: 68px;
				background: url(img/btn.jpg) no-repeat -70px -69px;
				position: absolute;
				top: 20px;
				left: 1px;
				z-index: 1;
			}
			
			.a1:hover {
				background: url(img/btn.jpg) no-repeat -70px 0;
			}
			
			.a2 {
				display: block;
				width: 68px;
				height: 68px;
				background: url(img/btn.jpg) no-repeat 1px -69px;
				position: absolute;
				top: 20px;
				right: 0;
				z-index: 1;
			}
			
			.a2:hover {
				background: url(img/btn.jpg) no-repeat 1px 0;
			}
			
			ul li a:hover {
				position: relative;
				top: 4px;
			}
			
			.control {
				border-bottom: 1px solid #ccc;
				background: #eee;
				text-align: center;
				padding: 20px 0;
			}
		</style>
	</head>

	<body>
		<div class="control">
			<label id="chk_pause"><input type="checkbox" checked="checked">间隔停顿</label>
			<select id="pause_time">
				<option value="100">短</option>
				<option value="1000" selected="selected">中</option>
				<option value="3000">长</option>
			</select>

			<!--滚动速度：-->
			<select id="sel_speed">
				<option value="2">慢</option>
				<option value="5">中</option>
				<option value="10">快</option>
			</select>
		</div>
		<div id="content">
			<a href="#" class="a1"></a>
			<a href="#" class="a2"></a>
			<div id="banner">
				<ul>
					<li>
						<a href="#"><img src="img/1.jpg" alt="" /></a>
					</li>
					<li>
						<a href="#"><img src="img/2.jpg" alt="" /></a>
					</li>
					<li>
						<a href="#"><img src="img/3.jpg" alt="" /></a>
					</li>
					<li>
						<a href="#"><img src="img/4.jpg" alt="" /></a>
					</li>
				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var banner = document.getElementById('banner');
		var ul = document.getElementsByTagName('ul')[0];
		var li = ul.getElementsByTagName('li');
		var a1 = document.getElementsByClassName('a1')[0];
		var a2 = document.getElementsByClassName('a2')[0];
		var oChk = document.getElementById('chk_pause');
		var oPauseTime = document.getElementById('pause_time');
		var oSpeed = document.getElementById('sel_speed');
		var spend = -2
		ul.innerHTML += ul.innerHTML;
		ulwidth = ul.style.width = li[0].offsetWidth * li.length + 'px';
		//滚动
		function move() {
			if(ul.offsetLeft <= -ul.offsetWidth / 2) {
				ul.style.left = 0;
			}
			if(ul.offsetLeft > 0) {
				ul.style.left = -ul.offsetWidth / 2 + 'px';
			}
			ul.style.left = ul.offsetLeft + spend + 'px';
		}
		var timer = setInterval(move, 30)
		banner.onmouseover = function() {
			clearInterval(timer);
		}
		banner.onmouseout = function() {
			timer = setInterval(move, 30)
		}
		//左右运动的切换
		//向左滚动
		a1.onclick = function() {
			spend = -2
		}
		//向右滚动
		a2.onclick = function() {
			spend = 2
		}
		
		//快中慢
		oSpeed.onchange = function() {
			spend = parseInt(this.value);
		};
	</script>

</html>